import React, { useState } from 'react'
import axios from "axios"
import PubSub from "pubsub-js"

export default function Header() {
  //状态初始化 拿到用户输入的值,根据值进行搜索
  //为什么是数组???
  //分阶段给用户进行提醒,初始化阶段:请开始搜索; 搜索阶段:正在搜素中; 搜索完成:展示数据
  const [search,setSearch] = useState("")

  const searchChangeHandle = (e)=>{
    setSearch(e.target.value)
  }

  //点击搜索按钮发送请求
  const searchHandle = async ()=>{
    //发送axios请求,拿到返回请求结果并发布,让兄弟组件通过订阅拿到数据
    const result = await axios.get("https://api.github.com/search/users?q=" + search)
    console.log(result);
    //发布
    PubSub.publish("searchInfor", result)
  }

  return (
    <section className="jumbotron">
    <h3 className="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" value = {search} onChange = {searchChangeHandle} placeholder="enter the name you search"/>
      &nbsp;
      <button onClick = {searchHandle}>Search</button>
    </div>
  </section>
  )
}
